/* 基本样式大全 */
:root{
    /* 颜色 */
    --color-secondary: #ffffff; /* 辅助色调 */
    --primary-color: #303133; /* 常规默认颜色,如: 字体 */

    /* 状态 */
    --color-primary: #0066cc; /* 主题颜色 */
    --color-primary-light: #66b1ff; /* 主题颜色亮色 */
    --color-primary-dark: #409EFF; /* 主题颜色暗色 */

    --color-success: #85ce61; /* 成功 */
    --color-warning: #e6a23c; /* 警告 */
    --color-danger: #f56c6c; /* 危险 */
    --color-info: #909399; /* 信息 */
    --color-disabled: #c0c4cc; /* 禁用 */

    /* 背景 */
    --background-color-base: #ffffff; /* 基础背景色 */

    /* 字体大小 */
    --font-title-size: 48px; /* 大标题 */
    --font-sub-size: 36px; /* 副标题 */


    --font-large-size: 24px; /* 大字体 */
    --font-default-size: 16px; /* 默认 */
    --font-small-size: 14px; /* 小字体 */
    --font-mini-size: 12px; /* 超小字体 */





    /* 边距 */
    --section-margin: 48px;
    /* 项的间隙 */
    --section-items-margin: 20px;

    

    /* 边框 */
    --border-color-base: #dcdfe6;
    --border-color-light: #e4e7ed;
    --border-color-lighter: #ebeef5;



    /* 经过边框 */
    --border-color-hover: #c0c4cc;
    /* 基础边框弧形 */
    --border-radius-base: 4px;
    /* 边框圆弧 */
    --border-radius-round:40px;
    /* 边框圆形 */
    --border-radius-circle: 50%;

    /* 阴影 */
    --box-shadow: 0 2px 12px rgba(0,0,0,.1);



    --font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;


}
/* 按钮 */
.btn {
    position: relative;
    display: inline-block;
    white-space: nowrap;
    padding: 12px 20px;
    border-radius: var(--border-radius-base);
    cursor: pointer;
    background: #fff;
    border: 1px solid #dcdfe6;
    color: #606266;
    -webkit-appearance: none;
    text-align: center;
    box-sizing: border-box;
    outline: none;
    margin: 0;
    font-size: var(--font-default-size);
    transition: .1s;
    &.round {
        border-radius: var(--border-radius-round);
    }
    &.circle {
        display: inline-block;
        border-radius: var(--border-radius-circle);
        width: 1em;
        height: 1em;
        padding: 2em;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    /* 图标 */
    &.icon {
        --icon: url(https://segmentfault.com/img/remote/1460000038583127);
        background: var(--icon);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center right;
    }
    /* 文字图标 */
    &.text-icon {
        --icon: url("../src/images/right.png");
        --min-width: 10em;
        --min-height: 2.8em;
        --padding: 0.6em 8px;
        width: var(--min-width);
        height: var(--min-height);
        text-align: left;
        padding: var(--padding);
        position: relative;
        &::after{
            position: absolute;
            right: 0.5em;
            top: 50%;
            transform: translateY(-50%);
            content: "";
            width: 1.6em;
            height: 1.6em;
            background: var(--icon);
            background-repeat: no-repeat;
            background-size: contain;
        }
    }
    
    &.primary {
        background-color: var(--color-primary);
        color: #fff;
    }
    &.success {
        background-color: var(--color-success);
        color: #fff;
    }
    &.warning {
        background-color: var(--color-warning);
        color: #fff;

    }
    &.danger {
        background-color: var(--color-danger);
        color: #fff;
    }
    &.info {
        background-color: var(--color-info);
        color: #fff;
    }
    
    &.disabled {
        cursor: not-allowed;
        background-color: var(--color-disabled);
        color: #fff;
    }
    &.medium {
        font-size: var(--font-default-size);
        padding: 0.4em 1.1em;

    }
    &.small {
        padding: 0.3em 0.9em;
        font-size: var(--font-small-size);
        line-height: 1.5;
        
    }
    &.mini {
        font-size: var(--font-mini-size);
        padding: 0.2em 0.9em;
    }
    &::before{
        content: "";
        position: absolute;
        display: block;
        transition: all .6s;
        width: 100%;
        height: 0;
        border-radius: 50%;
        left: 50%;
        top: 50%;
        padding-top: 100%;
        transform: translateX(-50%) translateY(-50%);
    }
    &::after{
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        transition: all .3s;
        z-index: 0;
        opacity: 0;
        top: 0;
        left: 0;
    }
    &:hover::after{
        opacity: 1
    }
}


























